<template>
  <div class="login">
    <div class="pulse">
      <div class="login-body">
        <div>
          <img class="login-img" src="../assets/zhongtai.png" alt />
        </div>
        <div class="login-box">
          <div class="login-icon">
            <img class="login-person" src="../assets/person.png" alt />
          </div>
          <div class="form-con">
            <p class="title">新疆中泰矿冶智慧班建系统</p>
            <el-form :model="form" :rules="rules" ref="loginForm">
              <el-form-item class="c-tel" prop="username">
                <el-input
                  v-model="form.username"
                  placeholder=" 请输入账号"
                  prefix-icon="el-icon-user"
                ></el-input>
              </el-form-item>
              <el-form-item class="c-tel" prop="password">
                <el-input
                  v-model="form.password"
                  placeholder=" 请输入登录密码"
                  prefix-icon="el-icon-lock"
                  show-password
                ></el-input>
              </el-form-item>

              <el-form-item class="c-button">
                <el-button :loading="loading" type="primary" @click="login"
                  >登录</el-button
                >
              </el-form-item>
            </el-form>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        username: '',
        password: '',
      },
      rules: {
        username: [{ required: true, message: '请输入账号', trigger: 'blur' }],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
      },
      loading: false,
    };
  },
  methods: {
    login() {
      this.$refs.loginForm.validate((valid) => {
        if (valid) {
          this.loading = true;
          this.$store
            .dispatch('user/login', this.form)
            .then((res) => {
              this.$router.push({
                path: this.$route.query.redirect || '/',
              });;
              this.$store.dispatch('user/setAvatar')
            })
            .catch((err) => {
              this.loading = false;
            });
        } else {
          return false;
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.login {
  .c-tel {
    width: 300px;
    height: 45px;
    margin: 30px auto;
    border-radius: 3px;
  }
  .c-button {
    text-align: center;
    .el-button {
      width: 300px;
      background: linear-gradient(90deg, #397bad 0%, #183668 100%);
      border-radius: 8px;
    }
  }
  .login-check {
    font-size: 16px;
    font-weight: 500;
    color: #3777a9;
    line-height: 22px;
  }
  width: 100%;
  height: 100%;
  background-image: url('../assets/login-bg.jpg');
  background-size: cover;
  background-position: center; // position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  @keyframes pulse {
    0% {
      transform: scale(0.2);
      opacity: 0;
    }
    100% {
      transform: scale(1);
      opacity: 1;
    }
  }
  .pulse {
    animation-duration: 1.4s;
    animation-name: pulse;
    animation-timing-function: ease-in-out;
    .login-body {
      width: 1100px;
      height: 620px;
      background-color: #ffffff;
      border-radius: 8px;
      box-sizing: border-box;
      padding: 70px 70px 80px;
      display: flex;
      flex-direction: column;
      .login-box {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        padding: 0 52px;
      }
      .login-icon {
        display: flex;
        justify-content: center;
        align-items: center;

        // margin-bottom: 35px;
        .login-person {
          width: 366px;
          height: 344px;
          margin-top: 100px;
        }
      }
      .login-img {
        width: 160px;
        height: 44px;
      }
    }

    .login-copyright {
      color: hsla(0, 0%, 100%, 0.9);
      text-shadow: 8px 3px 5px #07000e;
      font-size: 12px;
      width: 100%;
      text-align: center;
      margin-top: 20px;
    }
  }
  .title {
    font-size: 36px;
    font-weight: 500;
    color: #0a0d19;
    line-height: 50px;
    margin-bottom: 60px;
  }
}
</style>
<style>
.el-input__prefix {
  color: #6897bc;
}
</style>
